<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>9Vue中的条件渲染</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-if  后面跟的表达式决定了这个div标签是否被真实的挂载到页面上 -->
        <div v-if="show">{{msg}}</div>
        <div v-show="show">{{msg}}</div>
         为false的话，对应的dom会从dom节点上直接移除
        v-show 为false的话，对应的dom在页面上依然存在，只是通过把display设置为none来隐藏dom

        v-if 
        v-else
        v-else-if   (v-else 元素必须紧跟在 v-if 或 v-else-if 元素之后 - 否则无法识别它。)

        v-if,  v-show 的区别：
        相同点：都能控制一个模板标签在页面上是否显示
        区别：v-if  只要对应的变量值是false,对应的dom会从dom节点上直接移除
              v-show   一旦对应的JS表达式值是false,对应的dom在页面上依然存在，只不过它是以一个display:none;的形式放在页面之上
        频繁改变一个dom元素显示与隐藏时，用v-show性能会高一些，因为他不会频繁的把一个dom从页面上删除再添加

        关于key: 
        Vue在重新渲染页面的时候会尽量尝试去复用页面已经存在的dom,给元素添加key可以避免这个问题。
        当给元素标签加key值时，Vue会知道它是页面上唯一的元素，如果两个input或者div的key不一样，就不会尝试覆盖前面的input或div标签，这是Vue中虚拟dom的diff算法的一个内容。
       
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            dara: {
                show: false,
                msg: "hello world"
            }
        })
    </script>
</body>

</html>